import React from 'react';
import PropTypes from 'prop-types';
import css from './index.less';
import transContainer from 'modules/common/transitionContainer';

export default class Polygon extends React.Component {

  static propTypes = {
    mod: PropTypes.object.isRequired,
  };


  renderSvg(arr) {
    const { width, height, background, borderWidth, strokeColor } = this.props.mod;
    console.log(this.props.mod);
    let dd = '';
    arr.forEach( (item, index) => {
      if (index === 0) {
        dd += 'M' + item + ' ';
      } else if (index !== 0 && index % 2 === 0) {
        dd += 'L' + item + ' ';
      } else {
        dd += item + ' ';
      }
    });
    dd = dd + 'Z';

    return (
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width={width} height={height}>
        <path d={dd} fill={background} strokeWidth = {borderWidth} stroke={strokeColor}/>
      </svg>
    );
  }

  render() {
    const { mod } = this.props;
    const { side, width, height, } = mod;

    // 点的顺序是左下角顺时针
    const pathD = [
      [
        (width / 2) * (1 - Math.sin( Math.PI / 3)), (height / 2) * (1 + Math.cos( Math.PI / 3)),
        width / 2, 0,
        (width / 2) * (1 + Math.sin( Math.PI / 3)), (height / 2) * (1 + Math.cos( Math.PI / 3)),
      ],
      [
        0, 0, width, 0,
        width, height, 0, height,
      ],
      [
        (width / 2) * (1 - Math.sin( Math.PI / 5)), (height / 2) * (1 + Math.cos( Math.PI / 5)),
        (width / 2) * (1 - Math.cos( Math.PI / 10)), (height / 2) * (1 - Math.sin( Math.PI / 10)),
        width / 2, 0,
        (width / 2) * (1 + Math.cos( Math.PI / 10)), (height / 2) * (1 - Math.sin( Math.PI / 10)),
        (width / 2) * (1 + Math.sin( Math.PI / 5)), (height / 2) * (1 + Math.cos( Math.PI / 5)),
      ],
      [
        (width / 2) * (1 - Math.sin( Math.PI / 6)), (height / 2) * (1 + Math.cos( Math.PI / 6)),
        0, height / 2,
        (width / 2) * (1 - Math.sin( Math.PI / 6)), (height / 2) * (1 - Math.cos( Math.PI / 6)),
        (width / 2) * (1 + Math.sin( Math.PI / 6)), (height / 2) * (1 - Math.cos( Math.PI / 6)),
        width, height / 2,
        (width / 2) * (1 + Math.sin( Math.PI / 6)), (height / 2) * (1 + Math.cos( Math.PI / 6)),
      ],
      [
        (width / 2) * (1 - Math.sin( Math.PI / 7)), (height / 2) * (1 + Math.cos( Math.PI / 7)),
        (width / 2) * (1 - Math.sin( Math.PI * 3 / 7)), (height / 2) * (1 + Math.cos( Math.PI * 3 / 7)),
        (width / 2) * (1 - Math.sin( Math.PI * 2 / 7)), (height / 2) * (1 - Math.cos( Math.PI * 2 / 7)),
        width / 2, 0,
        (width / 2) * (1 + Math.sin( Math.PI * 2 / 7)), (height / 2) * (1 - Math.cos( Math.PI * 2 / 7)),
        (width / 2) * (1 + Math.sin( Math.PI * 3 / 7)), (height / 2) * (1 + Math.cos( Math.PI * 3 / 7)),
        (width / 2) * (1 + Math.sin( Math.PI / 7)), (height / 2) * (1 + Math.cos( Math.PI / 7)),
      ],
      [
        (width / 2) * (1 - Math.sin( Math.PI / 4)), (height / 2) * (1 + Math.cos( Math.PI / 4)),
        0, height / 2,
        (width / 2) * (1 - Math.sin( Math.PI / 4)), (height / 2) * (1 - Math.cos( Math.PI / 4)),
        width / 2, 0,
        (width / 2) * (1 + Math.sin( Math.PI / 4)), (height / 2) * (1 - Math.cos( Math.PI / 4)),
        width, height / 2,
        (width / 2) * (1 + Math.sin( Math.PI / 4)), (height / 2) * (1 + Math.cos( Math.PI / 4)),
        width / 2, height,
      ],
      [
        (width / 2) * (1 - Math.sin( Math.PI / 9)), (height / 2) * (1 + Math.cos( Math.PI / 9)),
        (width / 2) * (1 - Math.sin( Math.PI * 3 / 9)), (height / 2) * (1 + Math.cos( Math.PI * 3 / 9)),
        (width / 2) * (1 - Math.sin( Math.PI * 4 / 9)), (height / 2) * (1 - Math.cos( Math.PI * 4 / 9)),
        (width / 2) * (1 - Math.sin( Math.PI * 2 / 9)), (height / 2) * (1 - Math.cos( Math.PI * 2 / 9)),
        width / 2, 0,
        (width / 2) * (1 + Math.sin( Math.PI * 2 / 9)), (height / 2) * (1 - Math.cos( Math.PI * 2 / 9)),
        (width / 2) * (1 + Math.sin( Math.PI * 4 / 9)), (height / 2) * (1 - Math.cos( Math.PI * 4 / 9)),
        (width / 2) * (1 + Math.sin( Math.PI * 3 / 9)), (height / 2) * (1 + Math.cos( Math.PI * 3 / 9)),
        (width / 2) * (1 + Math.sin( Math.PI / 9)), (height / 2) * (1 + Math.cos( Math.PI / 9)),
      ],
      [
        (width / 2) * (1 - Math.sin( Math.PI / 5)), (height / 2) * (1 + Math.cos( Math.PI / 5)),
        (width / 2) * (1 - Math.sin( Math.PI * 2 / 5)), (height / 2) * (1 + Math.cos( Math.PI * 2 / 5)),
        (width / 2) * (1 - Math.sin( Math.PI * 2 / 5)), (height / 2) * (1 - Math.cos( Math.PI * 2 / 5)),
        (width / 2) * (1 - Math.sin( Math.PI / 5)), (height / 2) * (1 - Math.cos( Math.PI / 5)),
        width / 2, 0,
        (width / 2) * (1 + Math.sin( Math.PI / 5)), (height / 2) * (1 - Math.cos( Math.PI / 5)),
        (width / 2) * (1 + Math.sin( Math.PI * 2 / 5)), (height / 2) * (1 - Math.cos( Math.PI * 2 / 5)),
        (width / 2) * (1 + Math.sin( Math.PI * 2 / 5)), (height / 2) * (1 + Math.cos( Math.PI * 2 / 5)),
        (width / 2) * (1 + Math.sin( Math.PI / 5)), (height / 2) * (1 + Math.cos( Math.PI / 5)),
        width / 2, height,
      ],
    ];


    const props = {
      className: css.wrapper,
      style: mod.style,
    };

    const svgEle = pathD.map((item, index) => {
      return ( side - 3 === index && this.renderSvg(item));
    })[side - 3];

    // 包装预制动效，必须传一个react组件
    const Node = transContainer(
      class extends React.Component {
        render() {
          return (
            <div {...this.props} ref="node">
              {svgEle}
            </div>
          );
        }
      }, mod, props);

    return <Node />;
  }
}
